<%= content_tag :article,
                id:    dom_id(topic),
                class: ['thredded--topics--topic', topic_css_classes(topic)],
                data: {
                    topic: topic.id,
                    messageboard: topic.messageboard_id,
                    unread: !topic.read? || nil,
                    followed: topic.followed? || nil
                } do %>
  <div class="thredded--topics--posts-count"><%= topic.posts_count %></div>

  <div class="thredded--topics--follow-info" title="<%= topic_follow_reason_text topic.follow_reason %>">
    <% if topic.followed? %>
      <%= shared_inline_svg "thredded/follow.svg", class: "thredded--topics--follow-icon", role: "img" %>
    <% else %>
      <%= shared_inline_svg "thredded/unfollow.svg", class: "thredded--topics--follow-icon", role: "img" %>
    <% end %>
  </div>

  <h1 class="thredded--topics--title">
    <%= link_to topic.title, topic.path %>
  </h1>

  <% if topic.categories.any? %>
    <ul class="thredded--topics--categories">
      <%= render topic.categories %>
    </ul>
  <% end %>

  <cite class="thredded--topics--updated-by">
    <%= time_ago topic.last_post_at %>
    <%= user_link topic.last_user %>
  </cite>

  <% if local_assigns[:show_messageboard] %>
    <span class="thredded--topics--messageboard">
      <%= t 'thredded.topics.in_messageboard_html',
            messageboard_link: link_to(topic.messageboard_name, topic.messageboard_path) %>
    </span>
  <% end %>

  <% if topic.blocked? && topic.can_moderate? %>
    <span class="thredded--topics--moderation-state thredded--alert thredded--alert-danger">
      <%= render 'thredded/shared/content_moderation_blocked_state', moderation_record: topic.last_moderation_record %>
    </span>
  <% end %>
<% end %>

<% if local_assigns[:sticky_topics_divider] &&
    !topic_iteration.last? && topic.sticky? && !topics[topic_counter + 1].sticky? %>
  <%= render 'thredded/topics/sticky_topics_divider' %>
<% end %>
